'use client'

import { CommentOutlined, UserAddOutlined } from '@ant-design/icons'
import { usePathname } from 'next/navigation'

interface NavIconsProps {
	activeTab: RouterType
	onTabChange: (tab: RouterType) => void
}

export default function NavIcons({ activeTab, onTabChange }: NavIconsProps) {
	const pathname = usePathname()

	const handleTabClick = (tab: RouterType) => {
		onTabChange(tab)
	}

	return (
		<div className="flex flex-col items-center gap-6 mt-6">
			<div
				className="w-14 h-14 flex items-center justify-center cursor-pointer group"
				onClick={() => handleTabClick('chat')}
			>
				<CommentOutlined
					className={`text-3xl transition-colors ${
						activeTab === 'chat' ? 'text-green-500' : 'text-gray-400 group-hover:text-white'
					}`}
				/>
			</div>
			<div
				className="w-14 h-14 flex items-center justify-center cursor-pointer group"
				onClick={() => handleTabClick('friend')}
			>
				<UserAddOutlined
					className={`text-3xl transition-colors ${
						activeTab === 'friend' ? 'text-green-500' : 'text-gray-400 group-hover:text-white'
					}`}
				/>
			</div>
		</div>
	)
}
